<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta charset="utf-8">
<meta name="viewport" content="width=1200,initial-scale=1.0">
<title>animation-delay 与队列动画</title>
<link rel="stylesheet" href="css/style.css" media="screen" title="no title" charset="utf-8">
<!--
	css3动画代码在下面这个文件中
	都是从 http://ecd.tencent.com/css3/tools.html 的动画库中选的
	小做修改
-->
<link rel="stylesheet" href="css/animation.css" />
</head>

<body>
	<div class="wrap">
		<h1 js="text: heading">{{ 标题 }}</h1>
		<p js="html: paragraph">{{ 段落 }}</p>
		<p js="html: paragraph">{{ 段落 }}</p>
		<p js="html: paragraph">{{ 段落 }}</p>
		<p js="html: paragraph">{{ 段落 }}</p>
		<p js="html: paragraph">{{ 段落 }}</p>
		<h2 class="title" js="text: title">{{ title }}</h2>
		<div class="inner">
			<ul class="list01 clearfloat" js="append: nodes;  swipeshow: settings; each: args; "></ul>
		</div>
		<h2 class="title" js="text: title">{{ title }}</h2>
		<div class="inner">
			<ul class="list02 clearfloat" js="append: nodes;  swipeshow: settings; each: args; "></ul>
		</div>

		<h2 class="title" js="text: title">{{ title }}</h2>
		<div class="inner">
			<ul class="list03 clearfloat" js="append: nodes;  swipeshow: settings; each: args; "></ul>
		</div>
		<h4><a href="http://weibo.com/islucifier/">作者：Jade</a></h4>
		<h4><a href="index.html">其他文章</a></h4>
		<h4>转载请注明出处。</h4>
	</div>

	<script type="text/javascript" src="../../vendors/jquery-1.7.2.min.js"></script>
	<script type="text/javascript" src="js/jplus-debug.js"></script>
	<script type="text/javascript" src="js/jprop-debug.js"></script>
	<script type="text/javascript">
		$(function() {

			var nodes = '<li><div class="item" js="text: txt"></div><div class="item" js="text: txt"></div><div class="item" js="text: txt"></div><div class="item" js="text: txt"></div><div class="item" js="text: txt"></div></li>',
				supportTouch = 'ontouchstart' in document;

			var model = {
				heading: 'animation-delay 与队列动画',
				paragraph: [
					'CSS3 的 animation-delay 属性，能够让简单的动画效果显得更加生动。',
					'让一组执行相同动画的元素，前后相继的启动，产生如波浪一样的感觉。',
					'DEMO示例是从腾讯公司的一个<a href="http://ecd.tencent.com/css3/tools.html" target="_blank">CSS3动画库</a>中，选取的几个动画效果，稍作修改，设置 delay 值。',
					'自动播放间隔时间为3秒。在移动端取消了自动播放，可滑动以触发下一帧的队列动画，在PC端则拖动之。',
					'<a href="css/animation.css" target="_blank">该DEMO的CSS3 动画文件点击这里</a>'
				],
				title: ['flipInX', 'flipInY', 'flip'],
				nodes: new Array(4).join(nodes),
				settings: [{
					opts: '.list01',
					type: null,
					className: 'cur1',
					auto: supportTouch ? false : true
				}, {
					opts: '.list02',
					type: null,
					className: 'cur3',
					auto: supportTouch ? false : true
				}, {
					opts: '.list03',
					type: null,
					className: 'cur2',
					dir: 'y',
					auto: supportTouch ? false : true
				}],
				args: function() {
					$(this).refresh({
						txt:[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]
					});
				}
			};

			$('.wrap').refresh(model);

		});
	</script>
</body>
</html>
